﻿$(document).ready(function () {
    //Show sticky help
    //$.showHelpMessage('Hover your mouse over an Album to see its details|Or click on it to view the Album|Use top pager to navigate around the dashboard pages');
    
    var _opacity = 0.5;
    //Album
    $('.album').css('opacity', _opacity);
    $('.album').mouseenter(function () {
        var album = $(this);
        //Mouse hover effect
        album.stop(true, true).animate(
            {
                opacity: 1
            },
            200
        );

        //Show album info
        //Move to tool tip into position
        var cssObj = {
            'top': album.offset().top - 45,
            'left': album.offset().left
        }

        //Fade the tool tip in
        $('#album_info').css(cssObj).css('display', 'block').stop(true, true).animate(
            {
                height: 44
            },
            200,
            function () {
                var albumParts = album.attr('onclick').split('=');
                var albumId = (albumParts[albumParts.length - 1].substring(0, 4));
                loadAlbumInfo(albumId);
            }
        );
        $('#album_info_loading').css('display', 'block');
        $('#album_info .detail').css('display', 'none');
    });
    $('.album').mouseleave(function () {
        $(this).stop(true, true).animate(
            {
                opacity: _opacity
            },
            500
        );
        //Fade the tool tip out
        $('#album_info').css('display', 'none').css('height', '0px');
        $('#album_info_loading').css('display', 'block');
        $('#album_info .detail').css('display', 'none');
    });

    //Pager 
    $('#album_dashboard_pager .button').mouseenter(function () {
        if (!$(this).is('.selected')) {
            $(this).stop(true, true).animate(
                {
                    opacity: 1,
                    color: '#B21822'
                },
                200
            );
        }
        else {
            $(this).stop(true, true).css('background', '#B21822').css('color', '#FFF17C');
        }
    });
    $('#album_dashboard_pager .button').mouseleave(function () {
        if (!$(this).is('.selected')) {
            $(this).stop(true, true).animate(
                {
                    opacity: 0.5,
                    color: '#FFF17C'
                },
                500
            );
        }
        else {
            $(this).stop(true, true).css('background', '#FFF17C').css('color', '#B21822');
        }
    });
});

/******************* Helpers *******************/

function loadAlbumInfo(albumId) {
    //Do an AJAX call to get the album info
    $.ajax({
        type: 'POST',
        url: 'Home.aspx/GetAlbumInfo',
        data: '{"albumId":"' + albumId + '"}',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        error: function (msg) {
            //Handle error
            showAlbumInfoError();
        },
        success: function (msg) {
            //Parse the JSON result and process
            var obj = jQuery.parseJSON(msg.d)
            showAlbumInfo(obj);
        }
    });
}

//Show error
function showAlbumInfoError() {
    $('#album_info_loading').css('display', 'none');
    $('#album_info .detail').css('display', 'block');

    $('#album_info .detail .name').html('Cannot retrieve the data').css('color', 'red');
    $('#album_info .detail .createdby').html('Cannot retrieve the data').css('color', 'red');
    $('#album_info .detail .desc').html('Cannot retrieve the data');
}

//Show album info
function showAlbumInfo(albumInfo) {
    $('#album_info_loading').css('display', 'none');
    $('#album_info .detail').css('display', 'block');

    $('#album_info .detail .name').html(albumInfo.Name).css('border-bottom', '1px solid #B21822');
    $('#album_info .detail .createdby').html(albumInfo.Author + ' @ ' + albumInfo.CreatedDate).css('border-bottom', '1px solid #B21822');
    $('#album_info .detail .desc').html(albumInfo.Desc);
}